<template>
  <div>
    精选的模态弹窗
    <el-dialog title="提示" :visible.sync="selectedDialogVisible" margin-top="10px" width="60%"
      :before-close="handleClose" :close-on-click-modal="false">
      <div class="contentBox">
        <div class="carouselBox">
          <el-carousel indicator-position="outside">
            <el-carousel-item v-for="item in imgList" :key="item.id">
              <img :src="item.url" alt="">
            </el-carousel-item>
          </el-carousel>
        </div>
        <!-- 留言板 -->
        <div v-if="is_login">
          <div class="inputModel">
            <el-avatar size="medium" :src=" is_login.headpic"></el-avatar>
            <el-input v-model="input" placeholder="请输入内容">
              <el-button slot="append" @click="comment">评论</el-button>
            </el-input>
          </div>
          <el-card class="box-card">
            <h2>留言板</h2>
            <div v-for="item in list" :key="item.id" class="text item">
              <div class="imgBox">
                <el-avatar size="medium" :src="is_login.headpic"></el-avatar>
              </div>
              <span class="centerSpan">
                <p>{{ is_login.username }}</p>
                <p>{{ item.msg }}</p>
              </span>
              <span> {{ item.date }}</span>
              <a class="delete" @click="deleteById(item.id)">删除</a>
            </div>
          </el-card>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="confirmFun">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    selectedDialogVisible: Boolean,
    data: Object,
  },
  data() {
    return {
      input: "",
      list: [],
      is_login: null,
      imgList: [
        {
          id: 1,
          url: "https://cdn-hz.skypixel.com/uploads/cn_files/1557821843250-ce7b5708ac31dc1c8a3c4b6ca7196fc6.jpg@!1200",
        },
        {
          id: 2,
          url: "https://cdn-hz.skypixel.com/uploads/cn_files/1595408714645-cd3f5b9e6c1a4793a7e54d2455e2f379.jpg@!1200",
        },
        {
          id: 3,
          url: "https://cdn-hz.skypixel.com/uploads/cn_files/1595408677100-b7a4451b429497a7b81872d394798ec1.jpg@!1200",
        },
        {
          id: 4,
          url: "https://cdn-hz.skypixel.com/uploads/cn_files/1557822739888-59b79c156e29670c7064f6806baa8ebf.jpg@!1200",
        },
      ],
    };
  },
  mounted() {
    this.getUserInfo();
    this.routerPath = window.location.pathname; //默认
  },
  methods: {
    getUserInfo() {
      let is_login = localStorage.getItem("islogin");
      let params = {
        email: is_login,
      };
      this.$axios.post("/api/getUserInfo", params).then((res) => {
        let { data } = res;
        this.is_login = data[0];
        this.$store.commit("SET_USERINFO", this.is_login);
      });
    },
    confirmFun() { },
    handleClose() {
      this.$emit("closeSelectedDialog");
    },
    comment() {
      let nowDate = new Date();
      let year = nowDate.getFullYear();
      let month = nowDate.getMonth() + 1;
      let day = nowDate.getDay();
      this.list.push({
        id: Date.parse(new Date()),
        msg: this.input,
        date: year + "年" + month + "月" + day + "日",
      });
      this.input = "";
    },
    deleteById(id) {
      this.list = this.list.filter((item) => item.id !== id);
    },
  },
};
</script>
<style scoped lang="scss">
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.contentBox {
  height: 700px;
}
::v-deep .el-dialog {
  margin-top: 20px !important;
}
// ::v-deep .el-dialog__header {
//   //   display: none;
// }
.headerBox {
  height: 40px;
  border: 1px solid red;
  position: relative;
  .close {
    position: absolute;
    right: -20px;
    top: 0px;
  }
}
.box-card {
  margin-top: 20px;
  min-height: 200px;
}
.text {
  font-size: 14px;
}
.carouselBox {
  img {
    width: 100%;
    height: 100%;
  }
}

.item {
  display: flex;
  justify-content: space-between;
  padding: 18px 0;
  text-align: left;
}
.centerSpan {
  margin-left: 20px;
  flex: 1;
  text-align: left;
  p {
    line-height: 25px;
  }
}
.inputModel {
  display: flex;
  justify-content: space-between;
}
.delete {
  margin-left: 20px;
  color: cornflowerblue;
}
</style>
